<template>
  <grid-item :x="config.x" :y="config.y" :w="config.w" :h="config.h" :i="config.i" style="background: #606266;" @resized="resize">
    <component ref="component" :is='config.component' :config="comConfig"></component>
  </grid-item>
</template>

<script>
import card from '../lib/component/card'
import VueGridLayout from "vue-grid-layout";
export default {
  name: "ComItem",
  components: {
    card,
    GridItem: VueGridLayout.GridItem,
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          component: 'card',
          x: 0,
          y: 6,
          w: 6,
          h: 6,
          i: '',
          attribute: {
            name: '只是一个标题'
          }
        }
      }
    },
  },
  data() {
    return {
      comConfig: {}
    }
  },
  watch: {
    config: {
      handler(n){
        this.comConfig = n
        console.log(this.comConfig);
      },
      immediate: true
    }
  },
  methods: {
    resize(i, newH, newW, newHPx, newWPx) {
      this.comConfig = Object.assign(this.config,{
        hPx: newHPx,
        wPx: newWPx
      })
      this.$refs.component.resize()
    }
  }
}
</script>

<style scoped>

</style>
